<!DOCTYPE html>
<!-- SOURCE: https://threejs.org/examples/webgl_materials_video.html -->
<html lang="en">
	<head>
		<title>three.js webgl - materials - video</title>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width">
		<style>
			body {
				background-color: #000;
				color: #fff;
				margin: 0px;
				overflow: hidden;
				font-family:Monospace;
				font-size:13px;
				text-align:center;
				font-weight: bold;
				text-align:center;
			}

			a {
				color:#0078ff;
			}

			#info {
				color:#fff;
				position: absolute;
				top: 5px; width: 100%;
				z-index:100;
			}

		</style>
	</head>
	<body>

		<div id="info">
			<a href="https://threejs.org" target="_blank">three.js</a> - <a href="https://github.com/fregante/iphone-inline-video/">iphone-inline-video</a>-enhanced <a href="https://threejs.org/examples/webgl_materials_video.html">webgl video demo</a>. playing <a href="https://durian.blender.org/" target="_blank">Big Buck Bunny</a> trailer <br>
			But Safari doesn't support crossOrigin videos on WebGL yet (<a href="https://bugs.webkit.org/show_bug.cgi?id=135379">bug</a>)

			<h2 id="behavior"></h2>
		</div>

		<script src="https://threejs.org/build/three.js"></script>

		<script src="https://threejs.org/examples/js/shaders/ConvolutionShader.js"></script>
		<script src="https://threejs.org/examples/js/shaders/CopyShader.js"></script>

		<script src="https://threejs.org/examples/js/postprocessing/EffectComposer.js"></script>
		<script src="https://threejs.org/examples/js/postprocessing/RenderPass.js"></script>
		<script src="https://threejs.org/examples/js/postprocessing/MaskPass.js"></script>
		<script src="https://threejs.org/examples/js/postprocessing/BloomPass.js"></script>
		<script src="https://threejs.org/examples/js/postprocessing/ShaderPass.js"></script>

		<script src="https://threejs.org/examples/js/Detector.js"></script>

		<!-- ############################### -->
		<!-- <iphone-inline-video additions> -->
		<!-- ############################### -->
		<script src="../dist/iphone-inline-video.js"></script>
			<video id="video" autoplay loop muted playsinline src="sample.mp4" style="display:none">
		</video>
		<!-- ################################ -->
		<!-- </iphone-inline-video additions> -->
		<!-- ################################ -->

		<script src="threejs.js"></script>

		<!-- ############################### -->
		<!-- <iphone-inline-video additions> -->
		<!-- ############################### -->
		<script>
			var video = document.querySelector('video');
			var behavior = document.querySelector('#behavior');
			switch(location.search) {
				case '?enabled=false':
					behavior.textContent = 'Module disabled everywhere.';
					break;

				case '?enabled=true':
					window.enableInlineVideo(video, {everywhere: true});
					behavior.textContent = 'Module enabled everywhere (whether it’s necessary or not)';
					break;

				default:
				case '?enabled=auto':
					window.enableInlineVideo(video);
					break;
			}
		</script>

		<!-- ################################ -->
		<!-- </iphone-inline-video additions> -->
		<!-- ################################ -->
	</body>
</html>
